{% extends 'base.html' %}

{% block  title%}
修改个人信息页面
{% endblock %}

{% block sidebar%}
    <aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">
      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'home' %}">
          <i class="bi bi-grid"></i>
          <span>首页</span>
        </a>
      </li>
      <li class="nav-heading">个人信息</li>
      <li class="nav-item">
        <a class="nav-link "  href="{% url 'changeSelfInfo' %}">
          <i class="bi bi-menu-button-wide"></i><span>个人信息</span></i>
        </a>
      </li><!-- End Components Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed"  href="{% url 'changePassword' %}">
          <i class="bi bi-journal-text"></i><span>修改密码</span>
        </a>
      </li>
      <li class="nav-heading">数据表格</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'tableData' %}">
          <i class="bi bi-layout-text-window-reverse"></i><span>数据操作</span>
        </a>
      </li>
      <li class="nav-heading">数据可视化</li>

      <li class="nav-item">
        <a class="nav-link collapsed"  href="{% url 'cityChar' %}">
          <i class="bi bi-bar-chart"></i><span>城市和景点等级分析</span></i>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'rateChar' %}">
          <i class="bi bi-gem"></i><span>评分情况分析</span>
        </a>
      </li><!-- End Icons Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'priceChar' %}">
          <i class="bi bi-person"></i>
          <span>价格销量分析</span>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'commentsChar' %}">
          <i class="bi bi-question-circle"></i>
          <span>评论分析</span>
        </a>
      </li>
      <li class="nav-heading">词云图</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'detailIntroCloud' %}">
          <i class="bi bi-card-list"></i>
          <span>详情简介词云图</span>
        </a>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{% url 'commentContentCloud' %}">
          <i class="bi bi-box-arrow-in-right"></i>
          <span>评论内容词云图</span>
        </a>
      </li>

      <li class="nav-heading">后台管理</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="http://127.0.0.1:8000/admin/">
          <i class="bi bi-envelope"></i>
          <span>后台数据管理</span>
        </a>
      </li>
    </ul>

  </aside>

{% endblock %}

{% block content %}
      <div class="pagetitle" style="display: flex;align-items: center">
      <div style="margin-right: auto">
          <h1>个人信息</h1>
        <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{% url 'home' %}">个人信息</a></li>
          <li class="breadcrumb-item active">修改个人信息页面</li>
        </ol>
      </nav>
      </div>
        <h5 style="font-weight: normal">
            {{ nowTime.year }} - {{ nowTime.mon }} - {{ nowTime.day }}
        </h5>
    </div>


            <section class="section dashboard">
              <div class="row">
                <div class="col-lg-12">

                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">修改个人信息</span></h5>

                      <div class="activity">

                          <form action="{% url 'changeSelfInfo' %}" method="POST" enctype="multipart/form-data">
                              <div class="row mb-3">
                                  <label for="inputText" class="col-sm-2 col-form-label">用户名</label>
                                  <div class="col-sm-10">
                                    <input type="text" name="username" disabled value="{{ userInfo.username }}" class="form-control">
                                  </div>
                                </div>
                              <div class="row mb-3">
                                  <label for="inputText" class="col-sm-2 col-form-label">地址</label>
                                  <div class="col-sm-10">
                                    <input type="text" name="address" value="{{ userInfo.address }}" class="form-control">
                                  </div>
                                </div>
                              <div class="row mb-3">
                                  <label for="inputText" class="col-sm-2 col-form-label">性别</label>
                                  <div class="col-sm-10">
                                    <select class="form-select" name="sex" aria-label="Default select example">
                                          <option {% if userInfo.sex == '男' %}
                                          selected
                                          {% endif %}  value="男">男</option>
                                          <option {% if userInfo.sex == '女' %}
                                          selected
                                          {% endif %} value="女">女</option>
                                        </select>
                                  </div>
                                </div>
                              <div class="row mb-3">
                                  <label for="inputText" class="col-sm-2 col-form-label">个人简介</label>
                                  <div class="col-sm-10">
                                    <textarea name="textarea" class="form-control" placeholder="{{ userInfo.textarea }}" value="{{ userInfo.textarea }}" style="height: 100px;"></textarea>
                                  </div>
                                </div>
                            <div class="row mb-3">
                                  <label for="inputText" class="col-sm-2 col-form-label">头像上传</label>
                                  <div class="col-sm-10">
                                      <img style="width:100px;border:1px solid #ddd;padding:5px" src="/media/{{ userInfo.avatar }}" alt="">
                                      <br>
                                                                      <input type="file" name="avatar">
                                  </div>
                                </div>
                              <div class="row mb-3">
                                  <label for="inputText" class="col-sm-2 col-form-label"></label>
                                    <div class="col-sm-10">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                  </div>
                              </div>
                          </form>

                      </div>

                    </div>
                  </div>

                </div>

              </div>
            </section>

{% endblock %}

{% block echarts%}
    <script>

    </script>
{% endblock %}